import React, { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { View, StyleSheet, Alert, Image, ActivityIndicator } from 'react-native';
import { Icon, List, ListItem, Button, FormInput, CheckBox } from 'react-native-elements';
import Loader from './widgets/Loader';
import { clearStorage } from './clientStorage';
import { NavigationActions } from 'react-navigation';
import { executor, primaryColor, toast, uploadImage } from './utils';
import ImagePicker from 'react-native-image-crop-picker';

const styles = StyleSheet.create({
  container: {
    padding: 16
  },
  marginTop: {
    marginTop: 16
  },
  right: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  spaceBetween: {
    marginTop: 16,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  image: {
    width: 100,
    height: 100
  }
});

class OrderNotePage extends Component {
  static navigationOptions = ({screenProps, navigation}) => {
    return {
      title: `Order #${navigation.state.params.displayId}`,
    };
  }
  state = { sendToCustomer: false }
  onToggleSend = () => this.setState({sendToCustomer:!this.state.sendToCustomer})
  onNoteChange = (note) => this.setState({note})
  onAttachment = () => {
    ImagePicker.openPicker({width: 400,
      height: 400,})
      .then(({path}) => this.setState({uri: path}));
  }
  onSubmit = () => {
    const { note, uri } = this.state;
    if (!note) return toast('Please leave your note');

    executor(this.props.sendIntercom, {note, uri, sendToCustomer: this.state.sendToCustomer})
      .then(({res}) => {
        this.setState({processing: false});
        if (res) {
          toast('Message sent');
          this.props.navigation.goBack();
        }
      });
    this.setState({processing: true});
    toast('Sending ...');
  }
  render() {
    return (
      <View style={styles.container}>
        <FormInput multiline={true} numberOfLines={4}
          placeholder={this.state.sendToCustomer?'Send to customer':'Send to knocknock CS'}
          onChangeText={this.onNoteChange}/>
        <View style={styles.spaceBetween}>
          <Button color='black' title='Attachment'
            backgroundColor='white' onPress={this.onAttachment}/>
        </View>
        {this.state.uri&&<Image style={styles.image} source={{uri:this.state.uri}}/>}
        {this.state.processing?<ActivityIndicator style={styles.marginTop}/>:
          <View style={styles.marginTop}>
            <Button title='Submit' backgroundColor={primaryColor}
              onPress={this.onSubmit}/>
          </View>
        }
      </View>
    );
  }
}

export default compose(
  graphql(gql`
    mutation sendIntercom($orderId:String,$message:String!,$sendToCustomer:Boolean) {
      sendIntercom(orderId:$orderId,message:$message,sendToCustomer:$sendToCustomer)
    }
  `, {
    name: 'sendIntercom',
    props: ({ownProps:{navigation:{state:{params:{id}}}}, sendIntercom}) => {
      return {
        sendIntercom: ({note, uri, sendToCustomer}) => {
          return Promise.resolve(uri&&uploadImage(uri))
            .then(upload => sendIntercom({
              variables: {
                message: `${note} ${upload?`\n${upload.data}`:''}`,
                orderId: id,
                sendToCustomer
              }
            }));
        }
      };
    }
  })
)(OrderNotePage);

